<template>
    <div class="book-manage">
        <h3>图书管理</h3>
        <el-table :data="currentPageData" stripe style="width: 100%;">
            <!-- 序号列 -->
            <el-table-column prop="id" label="序号" width="80" align="center" />

            <!-- 书名列 -->
            <el-table-column prop="name" label="书名" min-width="150" align="center" />

            <!-- 图片列 -->
            <el-table-column label="封面" width="120" align="center">
                <template #default="{ row }">
                    <el-image
                        style="width: 100%; height: auto; max-height: 100px;"
                        :src="row.image"
                        :preview-src-list="[row.image]"
                        fit="cover"
                    />
                </template>
            </el-table-column>

            <!-- 价格列 -->
            <el-table-column label="价格" width="100" align="center">
                <template #default="{ row }">
                    <span>￥{{ row.price.toFixed(2) }}</span>
                </template>
            </el-table-column>

            <!-- 作者列 -->
            <el-table-column prop="author" label="作者" min-width="120" align="center" />

            <!-- 数量列 -->
            <el-table-column label="数量" width="120" align="center">
                <template #default="{ row }">
                    <el-input-number
                        v-model="row.count"
                        :min="0"
                        size="small"
                        style="width: 100%;"
                        @change="handleQuantityChange(row)"
                    />
                </template>
            </el-table-column>

            <!-- 出版社列 -->
            <el-table-column label="出版社" min-width="150" align="center">
                <template #default="{ row }">
                    <span>人民出版社</span>
                </template>
            </el-table-column>

            <!-- 上架状态列 -->
            <el-table-column label="上架状态" width="100" align="center">
                <template #default="{ row }">
                    <el-switch
                        v-model="row.status"
                        :active-value="1"
                        :inactive-value="0"
                        style="width: 100%;"
                        @change="handleStatusChange(row)"
                    />
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3]"
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="total">
        </el-pagination>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';

const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(3);
const total = ref(0);

// 获取当前页的数据
const currentPageData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return tableData.value.slice(start, end);
});

// 获取数据
const fetchData = async () => {
    try {
        const response = await axios.get('http://localhost:3000/books');
        tableData.value = response.data;
        total.value = tableData.value.length;
    } catch (error) {
        console.error('获取数据失败:', error);
    }
};

// 处理数量变化
const handleQuantityChange = async (row) => {
    try {
        await axios.patch(`http://localhost:3000/books/${row.id}`, {
            count: row.count
        });
    } catch (error) {
        console.error('更新数量失败:', error);
    }
};

// 处理上架状态改变
const handleStatusChange = async (row) => {
    try {
        await axios.patch(`http://localhost:3000/books/${row.id}`, {
            status: row.status
        });
    } catch (error) {
        console.error('更新状态失败:', error);
    }
};

// 处理每页数量变化
const handleSizeChange = (newSize) => {
    pageSize.value = newSize;
};

// 处理当前页码变化
const handleCurrentChange = (newPage) => {
    currentPage.value = newPage;
};

onMounted(() => {
    fetchData();
});
</script>

<style scoped>
.book-manage {
    padding: 20px;
}

:deep(.el-table .cell) {
    white-space: nowrap;
}

:deep(.el-input-number.el-input-number--small) {
    width: 100%;
}

/* 添加表头样式 */
:deep(.el-table__header-wrapper th) {
    background-color: #f0f9eb !important;  /* 浅绿色背景 */
}

/* 可选：当鼠标悬停在表头时的样式 */
:deep(.el-table__header-wrapper th:hover) {
    background-color: #e1f3d8 !important;
}

/* 使分页组件居中 */
.el-pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px; /* 可根据需要调整顶部间距 */
}
</style>
